<template>
  <div class="order">
      <header-bar :head-title="headTitle" goBack="true"></header-bar>
      <div class="order-address">
        <p><span class="default">默认</span><span>张三</span><span>13500500045</span></p>
        <p>浙江省宁波市江东区银晨国际</p>
      </div>
      <div class="goods_list">
        <div class="list">
          <img src="https://cdn.bestkeep.cn/goods/img/goods_1496976709841.jpg@160h_160w_2e" />
          <div class="list-intro">
            <h2>20寸PC膜拉链登机箱</h2>
            <p class="num">×1</p>
            <p class="price">￥55555</p>
          </div>
        </div>
        <div class="list">
          <img src="https://cdn.bestkeep.cn/goods/img/goods_1496976709841.jpg@160h_160w_2e" />
          <div class="list-intro">
            <h2>20寸PC膜拉链登机箱</h2>
            <p class="num">×1</p>
            <p class="price">￥55555</p>
          </div>
        </div>
      </div>
<div class="option-box">
  <ul>
  <li>
    <div class="left">支付方式</div>
    <div class="right">在线支付</div>
  </li>
  <li>
    <div class="left">商品总额</div>
    <div class="right">￥9998.00</div>
  </li>

  <li>
    <div class="left">运费</div>
    <div class="right">￥8.00</div>
  </li>
    <li>
    <div class="left">实付款</div>
    <div class="right">￥9998.00</i></div>
  </li>
</ul>
</div>
<div class="order-time">下单时间：2017-09-15 14:20:20</div>

      <div class="order-bottom">
          <router-link :to="{name: 'pay', query: {id: 1}}" class="order-btn">立即支付</router-link>
            <div class="order-btn" @click="cancelOrder">取消订单</div>          
          <div class="order-btn" @click="deleteOrder">删除订单</div>
      </div>
  </div>
</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
import { MessageBox, Toast } from 'mint-ui';
export default {
  components: {
    HeaderBar
  },
  data () {
    return {
      headTitle: '确认订单'
    }
  },
  methods: {
    deleteOrder () {
      MessageBox.confirm('确定执行此操作?').then(action => {
        Toast({
          message: '删除成功',
          iconClass: 'mintui mintui-success'
        });
      })
    },
    cancelOrder () {
      MessageBox.confirm('确定执行此操作?').then(action => {
        Toast({
          message: '取消成功',
          iconClass: 'mintui mintui-success'
        });
      })
    }
  }
}
</script>
<style lang="scss">
@import '../../style/order.scss';
</style>

